// pages/song/song.js
import myAxios from '../../../utils/myAxios'
const appInstance =  getApp()
Page({

    /**
     * 页面的初始数据
     */
    data: {
        isPlay: false, //播放状态
        songObj: null, //当前播放的歌曲详情
        musicUrl: null, //歌曲播放链接
        songId: null, //用于存储当前播放歌曲的id
        durationTime: '--:--', //当前播放歌曲的总时间
        currentTime: '00:00', //当前播放到的时间
        currentWidth: 0, //红色进度条的宽度
        offsetLeft: null , //进度条距离最左侧的距离
        width: 0, //进度条总宽度
    },
    // 1.播放歌曲按钮
    async handlePlay(){
        if(this.data.isPlay) {
            // 进入这里说明正在播放，需要暂停
            this.backgroundAudioManager.pause()
            appInstance.globalData.playState = false
        }else{
            // 进入这里说明暂停，需要播放
            // this.backgroundAudioManager.play()
            
            await this.getMusicUrl()
            this.backgroundAudioManager.src = this.data.musicUrl
            this.backgroundAudioManager.title = this.data.songObj.name
            
            // 将正在播放的歌曲的id存在全局实例对象中
            appInstance.globalData.playId = this.data.songId
            appInstance.globalData.playState = true
        }
        this.setData({
            isPlay: !this.data.isPlay
        })
    },
    // 2.获取歌曲播放链接
    async getMusicUrl(){
        const res = await myAxios('/song/url', {
            id: this.data.songId
        })
        this.setData({
            musicUrl: res.data[0].url
        })
    },
    // 3.点击按钮切换歌曲
    switchType(e){
        const type = e.currentTarget.id
        this.$PubSub.publish('switchType', type)
    },
    // 4.获取歌曲详情
    async getSongDetail(){
        const res = await myAxios('/song/detail', {
            ids: this.data.songId
        })
        this.setData({
            songObj:  res.songs[0]
        })
        
        // 设置歌曲播放标题
        wx.setNavigationBarTitle({
            title: this.data.songObj.name
        })
    },

    // 5.监听背景音乐事件状态
    addEvent(){
        this.backgroundAudioManager.onPause(()=> {
            if(this.data.songId === appInstance.globalData.playId) {
                this.setData({
                    isPlay: false
                })
            }
            appInstance.globalData.playState = false
        })

        this.backgroundAudioManager.onTimeUpdate(()=>{
            const {currentTime, duration} = this.backgroundAudioManager
            const currentWidth = currentTime / duration * 100
            
            if(this.data.songId === appInstance.globalData.playId) {
                if(!this.flag) {
                    this.setData({
                        currentWidth,
                        currentTime: this.$moment(currentTime*1000).format('mm:ss')
                    })
                }
            }
        })

        this.backgroundAudioManager.onPlay(()=> {
            if(this.data.songId === appInstance.globalData.playId) {
                this.setData({
                    isPlay: true
                })
            }

            appInstance.globalData.playState = true
        })

    },

    // 6.手指滑动改变歌曲播放状态
    touchmove(e){

        const moveX = e.touches[0].clientX
        const moveWidth = moveX - this.data.offsetLeft
        this.scale = moveWidth / this.data.width
        this.setData({
            currentWidth : this.scale * 100
        })
        
        // this.setData({
        //     currentTime: this.$moment(currentTime*1000).format('mm:ss')
        // })
    },
    // 7.开始拖拽进度条
    touchSatrt(){
        this.flag = true
    },
    // 8.松开拖拽进度条
    touchEnd(){
        this.flag = false
        
        // 跳转到进度条时播放
        const currentTime = this.scale * this.backgroundAudioManager.duration
        this.backgroundAudioManager.seek(currentTime)
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: async function (options) {
        const {songid} = options
        // const res = await myAxios('/song/detail?ids='+songid)
        // 根据歌曲id获取歌曲详情
        this.setData({
            songId: songid*1
        })
        // 获取歌曲详情
        await this.getSongDetail()
        // 获取全局背景播放管理
        this.backgroundAudioManager=  wx.getBackgroundAudioManager()

        // 设置歌曲总时间
        this.setData({
            durationTime: this.$moment(this.data.songObj.dt).format('mm:ss')
        })

        // 用于绑定监听背景音乐相关事件
        this.addEvent()

        // 解决进入播放页面c3效果问题
        const {playId, playState} = appInstance.globalData
        if(playState && playId === this.data.songId) {
            this.setData({
                isPlay: true
            })
        }

        // 获取点击切换按钮传过来的id
        this.token = this.$PubSub.subscribe('sendId', async (msg,data)=> {
            console.log(1111);
            this.setData({
                songId:data
            })
            Promise.all([this.getMusicUrl(),this.getSongDetail()])
            .then(()=> {
                // 将当前歌曲的id存入到app实例对象身上,方便后续逻辑判断使用
                appInstance.globalData.playId = this.data.songId;
    
                // 将当前歌曲的播放状态存入到app实例对象身上,方便后续逻辑判断使用
                appInstance.globalData.playState = true;

                this.backgroundAudioManager.src = this.data.musicUrl
                this.backgroundAudioManager.title = this.data.songObj.name
                this.setData({
                    isPlay:true
                })
            })
        })

        // 绑定歌曲播放进度条
        
        const selectorQuery =  wx.createSelectorQuery()
        const inner = selectorQuery.select('.wrap')
        inner.boundingClientRect((e)=>{
            this.setData({
                offsetLeft: e.left,
                width: e.width
            })
        })
        selectorQuery.exec()
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {
    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () { 
        this.$PubSub.unsubscribe(this.token)
    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})